[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법

안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다.
해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요...

1. position 속성이 absolute?

; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이 relative인 경우는 다른 요소들을 고려해 정렬을 맞추어야 합니다. 앞 또는 뒤에 위치한 요소에 영향을 받기 때문이죠. 하지만 absolute의 경우는 다른 요소에 영향을 주지 않아 겹쳐지거나 화면 밖으로 이동하는 등 독립적인 레이아웃이 가능하게 되죠. 그리고 absolute로 설정한 경우 정렬 기준은 다음과 같이 두 가지가 됩니다.

1) 전체 윈도우를 기준으로 정렬
2) 바로 상위 레이어를 기준으로 정렬



1번은 브라우저 창 전체를 기준으로 정렬이 가능하다는 의미이구요... 2번은 바로 상위 레이어를 기준으로 정렬함을 의미합니다. 전체창을 기준으로 레이아웃을 설정하는 다른 값은 position: fixed가 있습니다. fixed로 설정하게 되면 스크롤을 이동해도 사용자가 보게되는 화면의 절대적인 값을 가지기 때문에 해당 레이어가 움직이지 않는 것이 차이점이라 하겠습니다.

2. position: absolute 정렬 방법

1) 전체 윈도우를 기준으로 정렬을 원하는 경우

; 해당 레이어를 이동할 때 top, bottom, left, right 속성을 이용합니다. 이럴 경우 전체 윈도우를 기준으로 해당레이어가 이동하게 됩니다.

2) 바로 한단계 상위 레이어를 기준으로 정렬하는 방법

; 이 때는 선택된 레이어가 top, bottom, left, right 속성을 가져서는 안됩니다. 그렇게 되면 전체 윈도우를 기준으로 정렬되기 때문에 margin값을 사용하여 레이어를 이동해야만 가능합니다.



하지만, 상위 레이어를 기준으로 정렬할 때 left, right, top, bottom을 사용할 수 있는 방법이 있습니다... 그렇게 하려면 부모 요소의 position 속성에 relative 값을 추가해주면 가능합니다.



이 둘의 차이점을 이해하면 레이아웃을 구성하는데 많은 도움이 되실 것 같습니다 :)